<template>
    <div class="user-manager">
        <div class="user-manager-top">
            <PageSearch :search-form-config="searchConfig" @queryBtnClick="queryHandler"/>
        </div>
        <div class="user-manager-table-div">
            <y-table :dataSource="tableDataSource" :columns="USER_COLUMNS" v-model:pagination="pagination"
                     @reRenderTable="reRenderTable">
                <template #title>
                    <div class="table-header">
                        <div>
                            <h3>用户列表</h3>
                        </div>
                        <div>
                            <a-button type="primary" @click="addUserBtnHandler">
                                <template #icon>
                                    <user-add-outlined/>
                                </template>
                                新增用户
                            </a-button>
                        </div>
                    </div>
                </template>
                <template #availableSlot="scope">
                    <template v-if="scope.scope.value">
                        <a-tag color="success">
                            <template #icon>
                                <check-circle-outlined />
                            </template>
                            可用
                        </a-tag>
                    </template>
                    <template v-else>
                        <a-tag color="error">
                            <template #icon>
                                <exclamation-circle-outlined />
                            </template>
                            不可用
                        </a-tag>
                    </template>
                </template>
                <template #roleTags="scope">
                    <template v-for="tag in scope.scope.value" :key="tag">
                        <a-tag color="blue">{{ tag.roleName }}</a-tag>
                    </template>
                </template>
                <template #operation="scope">
                    <div class="operation">
                        <a-button type="primary" shape="circle" @click="editUserBtnHandler(scope.scope.record.id)">
                            <template #icon>
                                <edit-outlined/>
                            </template>
                        </a-button>
                        <a-popconfirm
                            title="确定删除么?"
                            placement="bottom"
                            ok-text="确定"
                            cancel-text="取消"
                            @confirm="deleteConfirm(scope.scope.record.id)"
                        >
                            <a-button type="primary" danger shape="circle">
                                <template #icon>
                                    <delete-outlined/>
                                </template>
                            </a-button>
                        </a-popconfirm>
                    </div>
                </template>
            </y-table>
        </div>

        <UserModal :modal-title="modalTitle" ref="userModalRef" @refreshData="reRenderTable"/>
    </div>
</template>

<script setup lang="ts">
import {UserSearchConfig} from "@v/home/system/user/config/search.config";
import PageSearch from "@c/page-search";
import {USER_PAGE} from "@/apis/user-apis";
import {ref} from "vue";
import {PageObj, UserPageQuery, UserVO} from "@/apis/types";
import {USER_COLUMNS} from "@v/home/system/user/config/content.config";
import YTable from "@/base-ui/table/src/y-table.vue";
import UserModal from './components/user-modal.vue';

const userPageResult = ref<PageObj<UserVO>>();
const tableDataSource = ref<UserVO[]>();

const searchConfig = {
    formItems: UserSearchConfig,
    cols: {
        xs: 24,
        sm: 24,
        md: 8,
        lg: 8,
        xl: 8,
        xxl: 8,
    }
}

const pagination = ref({
    current: 1,
    pageSize: 10,
    total: 0,
    pageSizeOptions: ["1", "5", "10", "20", "30", "40", "50", "100"],
    showSizeChanger: true,
});

const modalTitle = ref<string>();
const userModalRef = ref<InstanceType<typeof UserModal>>();

const searchCondition = ref<UserPageQuery>()

const addUserBtnHandler = () => {
    modalTitle.value = "新增用户";
    userModalRef.value?.openModal(false);
}

const editUserBtnHandler = (userId:string) => {
    userModalRef.value?.openModal(true);
    modalTitle.value = "修改用户";
    userModalRef.value?.renderFormData(userId);
}


const queryHandler = (formValue?: UserPageQuery) => {
    if (!formValue) {
        formValue = {}
    }
    formValue.page = pagination.value.current
    formValue.size = pagination.value.pageSize
    searchCondition.value = formValue;
    USER_PAGE(formValue).then(res => {
        userPageResult.value = res.data;
        tableDataSource.value = res.data.records;
        pagination.value.current = res.data.current;
        pagination.value.total = res.data.total;
        pagination.value.pageSize = res.data.size;
    })
}

const reRenderTable = () => {
    console.log("调用reRenderTable")
    if (!searchCondition.value) {
        searchCondition.value = {}
    }
    searchCondition.value.page = pagination.value.current
    searchCondition.value.size = pagination.value.pageSize
    queryHandler(searchCondition.value)
}

/**
 * 删除用户
 *
 * @param userId 用户id
 */
const deleteConfirm = (userId: string) => {
    console.log("删除", userId)
}

queryHandler({
    page: pagination.value.current,
    size: pagination.value.pageSize
})

</script>

<style scoped lang="less">
.user-manager {
    background-color: #EFF2F5;
    width: 100%;
    display: flex;
    flex-direction: column;

    .user-manager-top {
        padding: 15px 0;
        background-color: white;
        width: 100%;
    }

    .user-manager-table-div {
        padding-top: 15px;
        margin-top: 20px;
        background-color: white;
        width: 100%;
    }
}

.operation {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.table-header {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.modal-form-btn{
    width: 100%;
    display: flex;
    justify-content: center;

    div{
        width: 100%;
    }
}

.avatar-uploader {
    img{
        width: 90%;
        height: 90%;
    }
}
</style>
